<template>
    <div id="app">
        <div class="box">
            <nav class="bottom">
                <div @click="doHome">
                    <router-link to="/shouye" class="home">
                        <img v-if="!$store.state.shouye.isActive" src="@/assets/Vector.png" alt="">
                        <img v-else src="@/assets/Vector-active.png" alt="">
                        <span :class="{ active: $store.state.shouye.isActive === 1 }">Home</span>
                    </router-link>
                </div>
                <div @click="doMe">
                    <router-link to="/me" class="me">
                        <img v-if="$store.state.shouye.isActive" src="@/assets/user.png" alt="">
                        <img v-else src="@/assets/user-active.png" alt="">
                        <span :class="{ active: $store.state.shouye.isActive === 0 }">Me</span>
                    </router-link>
                </div>
            </nav>
        </div>
        <router-view />
    </div>
</template>

<script>
export default {
    name: 'shouye',
    data() {
        return {
        }
    },
    methods: {
        //点击home
        doHome() {
            this.$store.commit('shouye/doChange', 1)
        },
        //点击me
        doMe() {
            this.$store.commit('shouye/doChange', 0)
        }
    },
    created() {
        window.scrollTo({
            top: 0,
            behavior: "smooth"
        });
    },
}
</script>
<style lang="less">
@a: 3.75vw;

.box {
    box-sizing: border-box;
    position: fixed;
    z-index: 99;
    bottom: 0px;
    left: 0px;
    height: (49/@a);


    .bottom {
        display: flex;
        justify-content: space-around;
        width: 100%;
        height: (49/@a);
        position: fixed;
        bottom: 0px;

        background-color: #fff;

        .active {
            font-size: (12/@a);
            color: #8342FF;
        }

        span {
            color: #C0C0C0;
            font-size: (12/@a);
        }

        .home {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            img {
                width: (30/@a);
                height: (30/@a)
            }

        }

        .me {
            display: flex;
            align-items: center;
            flex-direction: column;

            img {
                width: (30/@a);
                height: (30/@a)
            }
        }
    }
}
</style>